﻿
@{
    ViewBag.Title = Resources.WebStringsWeb.WebTitle;
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}

@section css {
    <link rel="stylesheet" href="~/Assets/vue/css/vant.css" />
    <script src="~/Assets/vue/js/vue3.js"></script>
    <script src="~/Assets/vue/js/vant4.js"></script>
    <style>
           @@font-face {
            font-family: "fff";
            src: url("~/Assets/vue/font/SourceHanSansSC-Regular-2.otf");
        }
        body {
            font-family: "fff";
        }
    </style>
}

<header class="mui-bar mui-bar-nav">
    @*<a id="menu" class="mui-action-menu mui-icon mui-icon-plus mui-pull-right" href="MDrillFormAdd"></a>*@
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title" style="color:white;" ng-cloak>消防场所</h1>
</header>
<div class="mui-content">
    <div id="app">
        <van-row>
            <van-popup v-model:show="showBottom"
                       position="bottom"
                       round
                       :style="{ height: '90%' }">
                <div style="padding-top: 20px;padding: 10px;box-sizing: border-box;width: 100%;height: 100%;">
                    <div v-for="e in chooseList" v-on:click="showPop(e)" style="position: relative;margin-top: 10px;">
                        <img v-for="es in e.PointList" style="width: 10px;height: 10px;border-radius: 4px;" :src="es.EquType.ImageInfo.FilePath" :style="{position:'absolute',left:es.X*100+'%',top:es.Y*100+'%'}" />
                        <img :src="e.ImageInfo.FilePath" alt="" style="width: 100%;height: 212px;" srcset="">
                    </div>

                </div>
            </van-popup>
            <van-col span="24">
                <div style="width: 347px;
margin: 0 auto;
height: auto;display: flex;flex-direction: column;">
                    <canvas v-show="false" id="canvas" style="width: 100%;height: 212px;"></canvas>
                    <div v-for="e in list"
                         style="width: 100%;height: 333px;margin-top: 11px;border-radius: 10px;overflow: hidden; background: #F9F9FC;">
                        <img v-on:click="showDot(e)" ref="test" :src="e.Map" style="width: 100%;height: 212px;" alt="" srcset="">
                        <div style="padding: 0 12px;height: 73px;box-sizing: border-box;">
                            <div style="width: 100%;">
                                <div style="font-size: 16px;
font-weight: 500;">{{e.Name}}</div>
                                <div style="display: flex;align-items: center;margin-top: 10px;">
                                    <div v-for="es in e.ItemList" style="margin-right: 6px; display: flex; align-items: center;font-size: 10px;
font-weight: normal;color: #757C8C;">

                                        <img style="width: 14px ;height: 14px;margin-right: 1px;" :src="es.ImgUrl" />
                                        <div>{{es.TypeName}}：{{es.Count}}</div>
                                    </div>

                                </div>

                            </div>

                        </div>
                        <div style="width: 100%;height: 48px;border-top: 1px solid #ededed;display: flex;justify-content: flex-end;align-items: center;">
                            <div v-on:click="more(e.Id)" style="width: 76px;
height: 28px;
display: flex;
margin-right: 14px;
align-items: center;
background: #014DA1;
justify-content: center;
font-size: 12px;
font-weight: normal;
color: #fff;
border-radius: 272px;">查看更多</div>
                        </div>
                    </div>
            </van-col>
        </van-row>
    </div>
</div>
@section js{
    <script src="~/Assets/js/mui.pullToRefresh.js"></script>
    <script src="~/Assets/js/mui.pullToRefresh.material.js"></script>
    <script src="~/Assets/vue/js/axios.js"></script>
    <script>

        mui.init({
            swipeBack: false,
            keyEventBind: {
                backbutton: false  //关闭back按键监听
            }
        });

    </script>
    <script type="module">
        import Request from "../../Assets/vue/js/request.js"
        const {
            createApp,
            ref,
            onMounted,
            h,
            reactive,
            toRefs,
            getCurrentInstance,
            nextTick,
            defineComponent
        } = Vue;


        function canvasToDataURL(canvas, format, quality) {
            return canvas.toDataURL(format || 'image/jpeg', quality || 1.0);
        }

        const Composition = {
            setup() {
                const data = reactive({
                    list: [],
                    ishow: false,
                    show: false,
                    url: "",
                    ctx: "",
                    dpr: 1,
                    chooseList: [],
                    showBottom: false,
                    canvas: null,
                    proxy: "",
                    images: [
                    ]
                });
                const params = toRefs(data);
                const methods = {
                    init: () => {
                        Request({
                            url: "/FireControl/getparklist",
                            method: 'get',

                        }).then(res => {
                            params.list.value = res.Data

                        })
                    },
                    showDot: (e) => {
                        params.showBottom.value = true
                        params.chooseList.value = e.MapList
                        return
                    },


                    showPop: async (e) => {
                        let list = e.PointList.map(es => {
                            return {
                                x: es.X,
                                y: es.Y,
                                bg: es.EquType.ImageInfo.FilePath
                            }
                        })

                        if (list.length == 0) {
                            return vant.showToast("暂无标记点位");
                        }

                        let fres = await methods.drowImage(e.ImageInfo.FilePath, list);
                        if (fres) {
                            vant.closeToast();
                            vant.showImagePreview({
                                images: [params.url.value],
                                showIndex: false,
                                closeable: true,
                            });
                        }
                    },
                    // url 图片路径
                    loadImage(list) {
                        let s = [];
                        return new Promise((resolve, reject) => {
                            list.forEach(async (e, i) => {
                                const img = new Image();
                                img.setAttribute("crossOrigin", "anonymous");
                                img.src = e.bg;
                                img.onload = function () {
                                    params.ctx.value.drawImage(
                                        img,
                                        (params.canvas.value.width / params.dpr.value) * e.x,
                                        (params.canvas.value.height / params.dpr.value) * e.y,
                                        15,
                                        15
                                    );
                                    s.push(i);
                                    console.log(s);
                                    if (s.length == list.length) {
                                        resolve(true);
                                    }
                                };
                                img.onerror = () => {
                                    vant.showToast("图像加载失败");
                                    reject(new Error("图像加载失败"));
                                };
                            });
                        });
                    },

                    loadBaseImage: (url) => {
                        return new Promise((resolve, reject) => {
                            const img = new Image();
                            img.setAttribute("crossOrigin", "anonymous");
                            img.src = url;
                            img.onload = () => {
                                const width = params.proxy.value.$refs.test[0].width;
                                const height = params.proxy.value.$refs.test[0].height;
                                params.canvas.value.width = width * params.dpr.value;
                                params.canvas.value.height = height * params.dpr.value;
                                params.ctx.value.scale(params.dpr.value, params.dpr.value);
                                params.ctx.value.drawImage(img, 0, 0, width, height);
                                // 当图像加载完成后进行resolve
                                resolve(img);
                            };
                            img.onerror = () => {
                                vant.showToast("图像加载失败");
                                reject(new Error("图像加载失败"));
                            };
                        });
                    },

                    drowImage: (url, list) => {
                        return new Promise(async (resolve, reject) => {
                            vant.showLoadingToast({
                                duration: 0,
                                forbidClick: true,
                                message: "数据加载中",
                            });
                            params.canvas.value = document.getElementById("canvas");
                            params.ctx.value = params.canvas.value.getContext("2d");

                            let res = await methods.loadBaseImage(url);
                            if (res) {
                                let ress = await methods.loadImage(list);
                                if (ress) {
                                    params.canvas.value.toBlob((blob) => {
                                        const imageUrl = URL.createObjectURL(blob);

                                        params.url.value = imageUrl;

                                        resolve(true);
                                    });
                                }
                            }
                        });
                    },


                    more: (id) => {
                        window.location.href = `MFireControlBuildingList?id=${id}`
                    }
                };


                onMounted(() => {
                    params.dpr.value = 4
                    methods.init()
                    const { proxy } = getCurrentInstance()
                    params.proxy.value = proxy
                })

                return {
                    // 返回对象给模板
                    ...params,
                    ...methods,
                };
            },
        };

        const vapp = createApp(Composition);
        vapp.use(vant.Lazyload);

        vapp.use(vant).mount("#app");
    </script>
}

